// @ts-ignore
import './index.css'

import {Component} from "react";
import {Avatar, Badge, Dropdown, Layout, MenuProps, message, Space} from "antd";
import LazyIcon from "../../Tools/Icon";

const {Header} = Layout;

import {delPrincipal, getCertainPrincipal} from '../../../utils/auth.util.tsx'
import {withRouter} from "react-router-dom";

class CustomHeader extends Component<any, { hasTodos: boolean }> {

    state = {
        hasTodos: false // todo
    }

    goto() {
        this.props.history.replace('/dashboard/history')
    }

    logout() {
        message.success("退出登录，清除痕迹中···").then(() => {
            delPrincipal()
            this.props.history.replace('/')
        })
    }

    render() {
        const principal = getCertainPrincipal()

        const items: MenuProps['items'] = [
            // {
            //     key: '1',
            //     label: (
            //         <a rel="noopener noreferrer" onClick={() => alert('todo')}>
            //             &nbsp;&nbsp;个人资料
            //         </a>
            //     ),
            //     icon: <LazyIcon iconName="UserOutlined"/>,
            //     disabled: false
            // },
            // {
            //     key: '2',
            //     label: (
            //         <a rel="noopener noreferrer" onClick={() => this.goto()}>
            //             &nbsp;&nbsp;待审核
            //         </a>
            //     ),
            //     icon: <LazyIcon iconName="ClockCircleOutlined"/>,
            //     disabled: false
            // },
            {
                key: '3',
                label: (
                    <a rel="noopener noreferrer" onClick={() => this.logout()}>
                        &nbsp;&nbsp;退出登录
                    </a>
                ),
                icon: <LazyIcon iconName="LogoutOutlined"/>,
                disabled: false,
                danger: true,
            }
        ];

        return (
            <>
                <Header className="site-layout-header" style={{padding: 0}}>
                    <div className="site-layout-header-logo">
                        <Space size={"middle"}>
                            <Avatar size="small" icon={<LazyIcon iconName="UserOutlined"/>} shape="square" style={{top: "-2px"}}/>
                            <Dropdown menu={{items}}>
                                <Badge dot={this.state.hasTodos} offset={[3, -1]}>
                                    <a onClick={e => e.preventDefault()}>
                                        {principal.nickname}
                                    </a>
                                </Badge>
                            </Dropdown>
                        </Space>
                    </div>
                </Header>
            </>
        )
    }
}

export default withRouter(CustomHeader);
